  <template>
      <div id="collect">
          <!-- 头部 -->
          <my-header fixed title='微头条' v-goTop:click='true'>
              <a class="w-search" slot='left' @click="wSearch"></a>
              <a class="w-release" slot='right' @click="wRelease"></a>
          </my-header>
          <!-- 正文 -->
          <div class="content" :class="{isIOS: $store.state.device == 'ios'}">
              <collect-list :itemJson="topList"></collect-list>
          </div>
          <!-- 子页面视图 -->
          <keep-alive>
              <router-view></router-view>
          </keep-alive>
      </div>
  </template>
  <script>
  import { mapGetters, mapMutations, mapActions } from 'vuex'
  export default {
      name: 'collect',
      data() {
          return {
            classPage: 1,
            topList: []
          }
      },
      computed: {
          ...mapGetters('login', [
              'isLogin'
          ]),
          ...mapGetters('detail', [
              'historyArticle'
          ])
      },
      watch: {

      },
      methods: {
          ...mapMutations('detail', [
              'set_historyArticle'
          ]),
          ...mapMutations('collect', [
              'set_collectArticle'
          ]),
          ...mapActions('collect', [
              'get_topList_data'
          ]),
          init() {
            this.topListTap()
          },
          // 找人
          wSearch () {
              if (this.isLogin) {
                   this.$router.push({name: 'wSearch'})
              } else {
                  this.$toast({ message: '未登录', duration: 1500 })
              }
          },
          // 发布
          wRelease () {
              if (this.isLogin) {
                   this.$router.push({name: 'release'})
              } else {
                  this.$toast({ message: '未登录', duration: 1500 })
              }
          },
          // 获取头条列表
          topListTap () {
              this.get_topList_data(this.classPage)
              .then(res => {
                  if (res) {
                    this.topList.push(...res.data.list)
                    this.classPage++
                  }
              })
              .catch(err => {
                  console.log(err)
              })
          }
      },
      created() {
        this.init()
      }
  }
  </script>
  <style lang='stylus'>
  #app {

  }
  #collect {
      width: 100%;
      height: 100%;
      overflow: hidden;
      padding-bottom: 48px;
      background: #fff;
      &.edit{
          padding-bottom: 88px;
      }
      header {
          .edit_btn {
              font-size: 20px;
              font-weight: bold;
              line-height: 44px;
              &.disable {
                  color: #999;
              }
          }
      }
      .content {

      }
  }
  </style>
